const path = require("path");
const MarkdownItContainer = require("markdown-it-container");
const CompressionPlugin = require("compression-webpack-plugin");
/**
 * 增加 hljs 的 classname
 */
const wrapCustomClass = function(render) {
  return function(...args) {
    return render(...args)
      .replace('<code class="', '<code class="hljs ')
      .replace("<code>", '<code class="hljs">');
  };
};
function resolve(dir) {
  return path.join(__dirname, dir);
}
const vueMarkdown = {
  preprocess: (MarkdownIt, source) => {
    MarkdownIt.renderer.rules.table_open = function() {
      return '<table class="table">';
    };
    MarkdownIt.renderer.rules.fence = wrapCustomClass(
      MarkdownIt.renderer.rules.fence
    );

    // ```html `` 给这种样式加个class hljs
    //  但是markdown-it 有个bug fence整合attr的时候直接加载class数组上而不是class的值上
    //  markdown-it\lib\renderer.js 71行 这么修改可以修复bug
    //      tmpAttrs[i] += ' ' + options.langPrefix + langName; --> tmpAttrs[i][1] += ' ' + options.langPrefix + langName;
    //     const fence = MarkdownIt.renderer.rules.fence
    //     MarkdownIt.renderer.rules.fence = function(...args){
    //       args[0][args[1]].attrJoin('class', 'hljs')
    //       var a = fence(...args)
    //       return a
    //     }

    // ```code`` 给这种样式加个class code_inline
    const code_inline = MarkdownIt.renderer.rules.code_inline;
    MarkdownIt.renderer.rules.code_inline = function(...args) {
      args[0][args[1]].attrJoin("class", "code_inline");
      return code_inline(...args);
    };
    return source;
  },
  use: [
    [
      MarkdownItContainer,
      "demo",
      {
        validate: (params) => params.trim().match(/^demo\s*(.*)$/),
        render: function(tokens, idx) {
          var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
          if (tokens[idx].nesting === 1) {
            var desc = tokens[idx + 2].content;
            //        const html = utils.convertHtml(striptags(tokens[idx + 1].content, 'script'));
            // 移除描述，防止被添加到代码块
            tokens[idx + 2].children = [];
            return `<demo-block> <div slot="desc">${
              tokens[idx + 1].content
            }</div><div slot="highlight">`;
          }
          return "</div></demo-block>\n";
        },
      },
    ],
  ],
};
module.exports = {
  pages: {
    index: {
      entry: "src/examples/main.js",
    },
    lib: {
      entry: "src/ui-components/index.js",
    },
  },
  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
  // 解决报错
  parallel: false,
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "production") {
      config.plugins.push(
        new CompressionPlugin({
          test: /\.(js|css|html)?$/i, // 压缩文件格式
          filename: "[path].gz[query]", // 压缩后的文件名
          algorithm: "gzip", // 使用gzip压缩
          minRatio: 0.8, // 压缩率小于1才会压缩
        })
      );
    }
  },
  chainWebpack: (config) => {
    config.plugins.delete("preload"); // TODO: need test
    config.plugins.delete("prefetch"); // TODO: need test
    // set svg-sprite-loader 将加载的 svg 图片拼接成 雪碧图
    config.module
      .rule("svg")
      .exclude.add(resolve("src/examples/assets/icons"))
      .end();
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/examples/assets/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]",
      })
      .end();
    config.module
      .rule("md")
      .test(/\.md/)
      .use("vue-loader")
      .loader("vue-loader")
      .end()
      .use("vue-markdown-loader")
      .loader("vue-markdown-loader/lib/markdown-compiler")
      .options({
        raw: true,
        ...vueMarkdown,
      });
  },
};
